<template>
  <div class="policy-page w">
    <el-card class="box-card" shadow="hover">
      <template #header>
        <el-page-header>
          <template #title>
            <el-text size="large" tag="b">Policies</el-text>
          </template>
          <template #content>
            <el-text size="large" type="primary" tag="b">International Orders</el-text>
          </template>
        </el-page-header>
      </template>

      <el-scrollbar height="calc(100vh - 280px)">
        <el-space direction="vertical" alignment="stretch" style="width: 100%">
          <div class="policy-section">
            <h2 class="section-title">1. Ordering Process</h2>
            <el-text class="policy-text">
              International orders follow the same checkout process as domestic orders. However, please note that additional
              information may be required for customs clearance and delivery. All orders must include:
              <ul class="policy-list">
                <li>Complete shipping address with postal code</li>
                <li>Valid phone number for delivery coordination</li>
                <li>Recipient's tax ID or customs registration number (if applicable)</li>
              </ul>
            </el-text>
          </div>

          <div class="policy-section">
            <h2 class="section-title">2. Payment Methods</h2>
            <el-text class="policy-text">
              We accept major international credit cards and PayPal for international orders. All prices are displayed in
              USD, but you will be charged in your local currency based on current exchange rates.
              <ul class="policy-list">
                <li>Visa, MasterCard, American Express</li>
                <li>PayPal</li>
                <li>Wire Transfer (for orders over $1000)</li>
              </ul>
            </el-text>
          </div>

          <div class="policy-section">
            <h2 class="section-title">3. Delivery Times & Shipping Options</h2>
            <el-text class="policy-text">
              International delivery times vary by destination and shipping method chosen:
              <ul class="policy-list">
                <li>Standard Shipping: 7-21 business days</li>
                <li>Express Shipping: 3-7 business days</li>
                <li>Priority Express: 2-4 business days (select countries only)</li>
              </ul>
            </el-text>
          </div>

          <div class="policy-section">
            <h2 class="section-title">4. Restricted Items</h2>
            <el-text class="policy-text">
              Certain items may be restricted or prohibited for international shipping. Please check your country's import regulations before placing an order.
            </el-text>
          </div>

          <el-divider>Important Information</el-divider>

          <el-descriptions title="International Shipping Details" :column="1" border>
            <el-descriptions-item label="Customs Forms">
              <el-text type="info">Required for all international shipments</el-text>
            </el-descriptions-item>
            <el-descriptions-item label="Tracking">
              <el-text type="info">Available for most international destinations</el-text>
            </el-descriptions-item>
            <el-descriptions-item label="Insurance">
              <el-text type="info">Optional for international orders</el-text>
            </el-descriptions-item>
          </el-descriptions>

          <el-alert title="Customs & Duties" type="warning" :closable="false" show-icon>
            <el-text class="mx-1">International orders may be subject to import duties and taxes</el-text>
          </el-alert>

          <el-alert title="Contact Support" type="info" :closable="false" show-icon>
            <el-text class="mx-1">For international order assistance, please contact our support team</el-text>
          </el-alert>
        </el-space>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style scoped>
.policy-page {
  padding: 20px 0;
  background-color: var(--el-bg-color-page);
}

.policy-text {
  line-height: 1.8;
  display: block;
  margin: 10px 0;
}

:deep(.el-page-header__title) {
  margin-right: 20px;
}

:deep(.el-descriptions__cell) {
  padding: 12px 20px !important;
}

.policy-section {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 16px;
}

.policy-list {
  margin: 10px 0;
  padding-left: 20px;
}

.policy-list li {
  margin: 8px 0;
  line-height: 1.6;
}
</style>